<template>
  <view class="page-detail">
    <view class="navbar">
      <u-icon
        name="arrow-left"
        color="#191919"
        size="20"
        @click="goBack()"
        class="back-box"
      ></u-icon>
      <view class="title">详情</view>
    </view>
    <view class="context content nyj-con-detail">
      <u-list
        title-bg-color="rgb(243, 244, 246)"
        customStyle="{'font-size': '16px'}"
      >
        <u-cell title="计划运销吨数(吨)" :label="detail.planNum"></u-cell>
        <u-cell title="已销售吨数(吨)" :value="detail.saleNum" center></u-cell>
        <u-cell
          title="申请运销吨数(吨)"
          :value="detail.applyNum"
          center
        ></u-cell>
        <u-cell title="申请年份" :value="detail.applyYear" center></u-cell>
        <u-cell title="申请月份" :value="detail.applyMonth" center></u-cell>
        <u-cell
          title="申请企业名称"
          :label="detail.refCorpName"
          center
        ></u-cell>
        <u-cell title="煤种" :value="detail.coalName" center></u-cell>
        <u-cell title="审批节点" :value="detail.taskName" center></u-cell>
        <u-cell
          title="审批状态"
          :value="detail.status == 0 ? '审批中' : '已完成'"
          center
        ></u-cell>
      </u-list>
    </view>
    <view class="nyj-btns btns">
      <button type="primary" @click="goApply">审核</button>
    </view>
  </view>
</template>

<script>
import { getApply } from "@/api/cockpit/need";
import config from "@/config";
export default {
  props: {
    ticketCode: {
      type: String,
    },
    pCode: {
      type: String,
    },
  },
  data() {
    return {
      detail: {},
      instanceId: "",
      baseUrl: config.baseUrl,
    };
  },
  onShow() {
    this.getDetail();
  },
  onLoad(option) {
    this.id = option.id;
    this.instanceId = option.instanceId;
  },
  methods: {
    async getDetail() {
      let res = (await getApply(this.id)) || {};
      this.detail = res.data;
    },
    goApply() {
      this.$tab.navigateTo("/pages/need/apply?instanceId=" + this.instanceId);
    },
    goBack() {
      uni.navigateBack();
    },
  },
};
</script>

<style lang="less" scoped>
.u-slot-title {
  display: flex;
}

.page-detail {
  .top-box {
    background-image: url("/static/images/common/list-top-bg.png");
    background-repeat: no-repeat;
    background-size: 100%;
    height: 16rpx;
    margin-top: 20rpx;
  }

  .navbar {
    .header-info {
      display: flex;
      height: 90rpx;
      line-height: 90rpx;
      margin-top: 86rpx;

      .u-icon {
        width: 10%;
        padding-left: 25rpx;
      }

      .title {
        font-size: 36rpx;
        font-weight: 500;
        color: #ffffff;
        text-align: center;
        width: 75%;
      }

      .right-btn {
        color: #fff;
        font-size: 36rpx;
      }
    }
  }

  .context {
    background-color: #ffffff;
    margin: 134rpx 20rpx 20rpx 20rpx;
    padding: 0 20rpx 20rpx 20rpx;
    border-radius: 16rpx;

    .number-title {
      font-size: 28rpx;
      color: #233239;
      padding-top: 20rpx;
      padding-bottom: 20rpx;
      padding-right: 28rpx;
      text-align: right;
    }

    .btn-list {
      width: 100%;
      display: flex;
      justify-content: end;

      .btn-box {
        display: flex;
        width: 45%;

        .map-btn {
          width: 100rpx !important;
        }

        .down-btn {
          width: 200rpx !important;
        }
      }
    }

    .step-box {
      margin-bottom: 40rpx;
    }

    /deep/.u-cell {
      line-height: 96rpx;
    }

    /deep/.u-cell__title-text {
      font-size: 30rpx;
      color: #666666;
    }

    /deep/.u-cell__value {
      font-size: 30rpx;
      color: #333333;
    }

    /deep/.u-cell__label {
      font-size: 30rpx;
      color: #333333;
    }
  }

  .step-box {
    background: #ffffff;
    border-radius: 15rpx 15rpx 15rpx 15rpx;
  }
}
</style>
